<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理授权</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .round {
            padding: 10px;
            width: 300px;
            height: 50px;
            border: 0px solid #dedede;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        #imghead2 {
            width: 50px;
            height: 50px;
            border-radius: 200px;
        }

        #imghead3 {
            width: 50px;
            height: 50px;
            border-radius: 200px;
        }
    </style>
    <script type="text/javascript" src="${basePath}/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${basePath}/layer/2.4/layer.js"></script>
    <script type="text/javascript">
        function homePage() {
            var moblie = document.getElementById("moblie").value;
            window.location.href = "${basePath}/p/success?userid=" + moblie;
        }

        function Determine() {
            var moblie = document.getElementById("moblie").value;
            $.ajax({
                url: "${basePath}/v/count",
                data: {
                    userid: moblie
                },
                success: function (res) {
                    if (res == 1) {
                        var file = document.getElementById("filepath1").value;
                        var nickname = document.getElementById("name").value;
                        var name = /^[\u4E00-\u9FA5_a-zA-Z]{2,10}$/;
                        if (file == "") {
                            alert("上传图片不能为空");
                        } else if (!name.test(nickname)) {
                            alert("姓名格式不符,请输入正确姓名");
                        } else {
                            document.getElementById("imghead3").style.display = "block";
                            document.getElementById("button").style.display = "none";
                            $("#form").submit();
                        }
                    } else if (res == 0) {
                        alert("授权人数到达上限,请点击前往购买");
                        var moblie = document.getElementById("moblie").value;
                        window.location.href = "${basePath}/u/home?userid=" + moblie;
                    }
                }
            });
        }

        function family() {
            document.getElementById("family").style.background = '#27a2f0';
            document.getElementById("friend").style.background = 'white';
            document.getElementById("work").style.background = 'white';
            document.getElementById("relationship").value = "家人";
        }

        function friend() {
            document.getElementById("family").style.background = 'white';
            document.getElementById("friend").style.background = '#27a2f0';
            document.getElementById("work").style.background = 'white';
            document.getElementById("relationship").value = "朋友";
        }

        function work() {
            document.getElementById("family").style.background = 'white';
            document.getElementById("friend").style.background = 'white';
            document.getElementById("work").style.background = '#27a2f0';
            document.getElementById("relationship").value = "工作";
        }

        //人脸检测
        function previewImage1(file) {
            var files = $("#filepath1").prop("files");
            var formData = new FormData();
            formData.append("file", files[0]);
            var filepath1 = document.getElementById('filepath1').value;		//获取文件路径
            var newfilepath1 = filepath1.substring(filepath1.lastIndexOf('.'));
            var jpg = '.jpg', png = '.png', jpeg = '.jpeg', gif = '.gif';
            if (jpg == newfilepath1 || png == newfilepath1 || jpeg == newfilepath1 || gif == newfilepath1) {
                $.ajax({
                    url: "${basePath}/face/detection",
                    fileElementId: "filepath1",
                    data: formData,
                    type: "post",
                    async: true,
                    processData: false,
                    contentType: false,
                    beforeSend: function (XMLHttpRequest) {
                        document.getElementById("1").style.display = "block";
                        document.getElementById("button").style.display = "none";
                    },
                    success: function (date) {
                        document.getElementById("1").style.display = "none";
                        document.getElementById("button").style.display = "block";
                        var s = JSON.parse(date);
                        console.log(s)
                        if (s == "413") {
                            alert("图片超出2BM");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s == "0") {
                            alert("图片异常,请重试");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "IMAGE_ERROR_UNSUPPORTED_FORMAT: image_file") {
                            alert("图像无法正确解析，有可能不是一个图像文件、或有数据破损、或图片文件格式不符合要求");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "INVALID_IMAGE_SIZE: image_file") {
                            alert("图片尺寸错误,图片太大或太小");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "INVALID_IMAGE_URL") {
                            alert("无法从指定的路径下载图片，图片路径错误或者无效");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "IMAGE_FILE_TOO_LARGE: image_file") {
                            alert("图片文件过大,请将图片文件大小控制在 2MB 内");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "IMAGE_DOWNLOAD_TIMEOUT") {
                            alert("下载图片超时");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "CONCURRENCY_LIMIT_EXCEEDED") {
                            alert("并发数超过限制,请稍后重试");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.error_message == "INTERNAL_ERROR") {
                            alert("服务器内部错误");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.faces.length == 0) {
                            alert("未检测到人脸,请重新选择一张图片,并确保人脸正对画面");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.faces.length > 1) {
                            alert("图片中不能超过两张头像");
                            document.getElementById('filepath1').value = "";	//清除图片路径 */
                            var img = document.getElementById("imghead1");
                            img.src = "${basePath}/csh/image/920645047.jpg";
                            img.style.height = "150px";
                            img.style.width = "80%";
                        } else if (s.faces.length == 1) {
                            document.getElementById("1").style.display = "none";
                            var div = document.getElementById('preview1');
                            document.getElementById('width').value = s.faces[0].face_rectangle.width;
                            document.getElementById('height').value = s.faces[0].face_rectangle.height;
                            document.getElementById('top').value = s.faces[0].face_rectangle.top;
                            document.getElementById('left').value = s.faces[0].face_rectangle.left;
                            if (file.files && file.files[0]) {
                                div.innerHTML = '<img id=imghead1>';
                                var img = document.getElementById('imghead1');
                                img.onload = function () {
                                    var rect = clacImgZoomParam(150, 150, img.offsetWidth, img.offsetHeight);
                                    img.width = rect.width;
                                    img.height = rect.height;
                                    img.style.marginTop = rect.top + 'px';
                                };
                                var reader = new FileReader();
                                reader.onload = function (evt) {
                                    img.src = evt.target.result;
                                };
                                reader.readAsDataURL(file.files[0]);
                            } else {//兼容IE
                                file.select();
                                var src = document.selection.createRange().text;
                                div.innerHTML = '<img id=imghead>';
                                var img = document.getElementById('imghead');
                                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                                status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
                                div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
                            }
                        }
                    },
                    error: function (date) {
                        alert("图片异常");
                        document.getElementById('filepath1').value = "";
                        var img = document.getElementById("imghead1");
                        img.src = "${basePath}/csh/image/920645047.jpg";
                        img.style.height = "150px";
                        img.style.width = "80%";
                    }
                });
            } else {
                alert("不是图片");
                document.getElementById('filepath1').value = "";
                var img = document.getElementById("imghead1");
                img.src = "${basePath}/csh/image/920645047.jpg";
                img.style.height = "150px";
                img.style.width = "80%";
            }
        }

        function clacImgZoomParam(maxWidth, maxHeight, width, height) {
            var param = {top: 0, left: 0, width: width, height: height};
            if (width > maxWidth || height > maxHeight) {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                if (rateWidth > rateHeight) {
                    param.width = maxWidth;
                    param.height = Math.round(height / rateWidth);
                } else {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <form id="form" action="${basePath}/v/add" method="post" enctype="multipart/form-data">
            <input type="hidden" name="yaddress" id="yaddress" value="${upload.yaddress}">
            <input type="hidden" name="ydetailed" id="ydetailed" value="${upload.ydetailed}">
            <input type="hidden" name="yphone" id="yphone" value="${upload.yphone}">
            <input type="hidden" name="moblie" id="moblie" value="${moblie}">
            <table width="100%" height="100%">
                <tr height="25%">
                    <td colspan="2" align="center">
                        <div style="text-align: center;">
                            <label>
                                <input type="file" name="filepath" id="filepath1" value=""
                                       onchange="previewImage1(this)" style="display: none;"/>
                                <div id="preview1"
                                     style="border: 0px solid red; overflow: hidden; position: relative; display: inline-block; width: 100%; height: 100%;">
                                    <img id="imghead1" src="${basePath}/csh/image/920645047.jpg" width="80%"
                                         height="150px">
                                </div>
                            </label>
                        </div>
                    </td>
                </tr>
                <tr height="5%">
                    <td colspan="2" align="center">
	   			 	<span id="1" style="display:none;">
	   					 <img id="imghead2" src="http://wwl.ycws.cc/image/backgroundimage/2.gif">
	   				</span>
                    </td>
                </tr>
                <tr height="5%">
                    <td style="width: 100px; background-color:#edeff0;" align="center"><img alt=""
                                                                                            src="${basePath}/csh/image/e.jpg"
                                                                                            style="width: 20px; height: 20px;">
                    </td>
                    <td style="width: 850px; background-color:#edeff0; color: #7f8081;" align="left">请参照下列图片上传个人正面照</td>
                </tr>
                <tr height="20%">
                    <td colspan="2" align="center">
                        <img alt="" src="${basePath}/csh/image/girl.jpg" style="height: 130px; width: 170px;">&nbsp;&nbsp;&nbsp;<img
                            alt="" src="${basePath}/csh/image/boy.jpg" style="height: 130px; width: 170px;">
                    </td>
                </tr>
                <tr height="5%" style="background-color: #edeff0;">
                    <td colspan="2"></td>
                </tr>
                <tr height="5%">
                    <td colspan="2">
                        <div style="border: px #f3f3f3 solid; width: 90%;  margin-left: 5%; height: 100%;">
                            <div style="float: left; border: px red solid; width: 15%; height:100%; text-align: center; padding-top: 5px; font-size: 14px;">
                                昵称
                            </div>
                            <div style="float: left; border: px red solid; width: 75%; height:100%; font-size: 16px; padding-top: 5px;">
                                <input type="text" name="name" id="name" style="width: 100%;"
                                       value="${(visitors.yname)!}"></div>
                        </div>
                    </td>
                </tr>
                <tr height="5%">
                    <td colspan="2">
                        <div style="border: 0px #f3f3f3 solid; width: 100%; height: 100%;">
                            <div style="float: left; border: 0px red solid; width: 25%; height:100%; text-align: center; background-color:#edeff0; font-size: 14px;">
                                选择分组
                            </div>
                            <div style="float: left; border: 0px red solid; width: 75%; height:100%; font-size: 16px; background-color:#edeff0;"></div>
                        </div>
                    </td>
                </tr>
                <tr height="10%">
                    <td colspan="3" align="center">
                        <input type="hidden" name="relationship" value="家人" id="relationship">
                        <a style="border: 1px solid gray; padding: 3px 10px 3px 10px; font-size: 18px; text-decoration: none; color: black; background-color:#27a2f0; "
                           class="round" onclick="family()" id="family"><font style="font-size: 15px;">家人</font></a>&nbsp;&nbsp;&nbsp;
                        <a style="border: 1px solid gray; padding: 3px 10px 3px 10px; font-size: 18px; text-decoration: none; color: black;"
                           class="round" onclick="friend()" id="friend"><font style="font-size: 15px;">朋友</font></a>&nbsp;&nbsp;&nbsp;
                        <a style="border: 1px solid gray; padding: 3px 10px 3px 10px; font-size: 18px; text-decoration: none; color: black;"
                           class="round" onclick="work()" id="work"><font style="font-size: 15px;">工作</font></a>&nbsp;&nbsp;&nbsp;
                    </td>
                </tr>
                <tr height="20%" style="background-color:#edeff0; ">
                    <td colspan="2" align="center">
                        <div id="button"
                             style="height: 50px; width: 250px; display:block;  background-color: #49a1f2; color: white; font-size: 16px;"
                             class="round" onclick="Determine()">确定
                        </div>
                        <img id="imghead3" style="display: none;" src="http://wwl.ycws.cc/image/backgroundimage/2.gif">
                    </td>
                </tr>
            </table>
            <input type="hidden" name="width" id="width" value=""><br>
            <input type="hidden" name="height" id="height" value=""><br>
            <input type="hidden" name="top" id="top" value=""><br>
            <input type="hidden" name="left" id="left" value=""><br>
        </form>
    </div>
</div>
</body>
</html>
